


/* 
  需求1: 模拟数据list  `[
      {"count": 4000, "price": 1200, "unitPrice": "0.3000"},
      {"count": 8000, "price": 2000,"unitPrice": "0.2500" },
      {"count": 40000, "price": 8000, "unitPrice": "0.2000" }
     ]`
*/

let countlist = [
    {"count": 4000, "price": 1200, "unitPrice": "0.3000"},
    {"count": 8000, "price": 2000,"unitPrice": "0.2500" },
    {"count": 40000, "price": 8000, "unitPrice": "0.2000" }
   ]

let listData = document.querySelector('.fouthline li')

let fouthline = document.querySelector('.fouthline')
let price = document.querySelector('.price')
let unitPrice = document.querySelector('.unitPrice')
//定义变量保存组装好的数据
let listHtml = ''
//遍历数组
countlist.forEach(function(v,i){
/*     listHtml = `
     <li><a href="#" class="data-price">${v.count}次</a></li>
    `
    fourthLine.innerHTML += listHtml //+= 会保留原来存在的东西, = 会覆盖掉原来存在的部分 */
    listHtml = `
    <li class="${i===0? 'active':''}" data-price="${v.price}"  data-unit-price="${v.unitPrice}"  >${v.count}次</li>
    `
    fouthline.innerHTML += listHtml
})

/* 
  需求: 点击li给其添加激活样式
*/
fouthline.addEventListener('click',function(e){
   let bool = e.target.nodeName === 'LI'
   if(bool){
       //先清除掉所有li的类名active
       for(let i = 1; i<fouthline.children.length;i++){
           fouthline.children[i].className = ''
       };

       //再给当前事件源添加激活样式
       e.target.className = 'active'

       //设置价格
      price.textContent = e.target.dataset.price

      //设置单价
      unitPrice.textContent = e.target.dataset.unitPrice
   }
})

/* 需求: 点击content-nav下面的a标签给其添加激活样式*/
/* 需求: 点击content-nav下面的a标签,显示对应的minbox */



let index = 0
let navA = document.querySelectorAll('.content-nav a')
let apiBox = document.querySelectorAll('.apicontent .tabbox')
console.log(navA)
navA.forEach(function(v,i){
  v.addEventListener('click',function(){
    navA[index].className = ''
    this.className = 'active'
    
    apiBox[index].className = 'tabbox'
    apiBox[i].classList.add('show') 

    index = i
  })
})